<template>
  <div ref="qrcode" class="qrcode" />
</template>

<script>
import QRCode from '@/directive/qrcode';

export default {
  name: 'Qrcode',
  props: {
    str: {
      type: String,
      default: 'Helow World!'
    },
    width: {
      type: Number,
      default: 120
    },
    height: {
      type: Number,
      default: 120
    }
  },
  watch: {
    str(val) {
      this.getQRCode();
    }
  },
  mounted() {
    this.qrcode = new QRCode(this.$refs.qrcode, {
      width: this.width, // 设置宽高
      height: this.height
    });
    this.getQRCode();
  },

  methods: {
    getQRCode() {
      this.qrcode.makeCode(this.str);
    }
  }
};
</script>
